<template>
    <div>
        <div class="l_con fl">
			<a href="index.html" class="reg_logo"><img src="@static/images/logo.png"></a>
			<div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="login.html">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form method="post" class="register_form" @submit.prevent="reg">
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name" v-model="form.username" @blur="checkusername">
						<span class="error_tip">{{error.username}}</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd">
						<span class="error_tip">请输入8-20位的密码</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd">
						<span class="error_tip">两次输入的密码不一致</span>
					</li>
					<li>
						<label>手机号:</label>
						<input type="text" name="phone" id="phone" v-model="form.mobile" @blur="checkmobile">
						<span class="error_tip">{{error.mobile}}</span>
					</li>
					<li>
                        <label>图形验证码:</label>
                        <input type="text" name="pic_code" id="pic_code" class="msg_input">
                        <img src="@static/images/pic_code.jpg" alt="图形验证码" class="pic_code">
                        <span class="error_tip">请填写图形验证码</span>
                    </li>
					<li>
						<label>短信验证码:</label>
						<input type="text" name="msg_code" id="msg_code" class="msg_input" v-model="form.smscode">
						<!-- <a href="javascript:;" class="get_msg_code"></a> -->
                        <button @click.prevent="getSmsCode" :disabled='flag'>{{mes}}</button>
						<span class="error_tip">请填写短信验证码</span>
					</li>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked">
						<label>同意”美多商城用户使用协议“</label>
						<span class="error_tip">请勾选用户协议</span>
					</li>
					<li class="reg_sub">
						<input type="submit" value="注 册">
					</li>
				</ul>				
				</form>
			</div>

		</div>

	</div>

	
    
</template>

<script>
import "@static/css/reset.css"
import "@static/css/main.css"
import axios from 'axios'
export default {
    data() {
        return {
            form:{},
            error:{username:'',mobile:''},
            flag:false,
            mes:'获取短信验证码',
            time:60
        }
    },
    methods: {
        checkusername(){
            // alert(this.form.username)
            let name = this.form.username
            //1.检查是否为空undifined
            if(name = undefined){
                // alert('必须输入用户名')
                this.error.username='必须输入用户名'
                return false
            }
            //2.格式是否正确 5-10位字符
            let reg = /\w{5,10}$/
            if(!reg.test(name)){
                // alert('请输入正确的格式')
                this.error.username='请输入正确的格式'
                return false
            }
            //3.唯一性验证
            this.axios.post('reg/',this.form).then(res=>{
                if(res.data.code == 10010){
                    this.error.username='必须输入用户名'
                    return false
                }
                if(res.data.code == 10011){
                    this.error.username='请输入正确的格式'
                    return false
                }
                if(res.data.code == 10012){
                    this.error.username='用户名已存在'
                    return false
                }

                this.error.username = 'ok'
            }).catch(error=>{
                console.log(error)
            })
        },
        //验证手机号
        checkmobile(){
            let mobile = this.form.mobile
            if(mobile == undefined){
                // alert('必须输入用户名')
                this.error.mobile='请输入手机号'
                return false
            }

            let reg = /^1[3-9]\d{9}$/
            if(!reg.test(mobile)){
                this.error.mobile='请输入正确格式'
                return false
            }

            this.axios.post('reg/',this.form).then(res=>{
                if(res.data.code == 10013){
                    this.error.mobile='请输入手机号'
                    return false
                }
                if(res.data.code == 10014){
                    this.error.mobile='请输入正确的格式'
                    return false
                }
                if(res.data.code == 10015){
                    this.error.mobile='手机号已存在'
                    return false
                }

                this.error.mobile = 'ok'
            })
        },
        //获取短信验证码
        getSmsCode(){
            //获取手机号
            this.axios.post('sendSms/',{'mobile':this.form.mobile}).then
            (res=>{
                //成功后开始倒计时，按钮变成disabled
                if(res.data.code == 200){
                    let m = setInterval(()=>{
                        //time -1
                        this.time --
                        //按钮变为不能用
                        this.flag = true
                        //文字发生变化
                        this.mes = this.time + '秒以后在操作'
                        if(this.time == 0){
                            clearInterval(m)
                            this.time = 60
                            this.flag = false
                            this.mes = '获取短信验证码'
                        }

                    }, 1000);
                    
                }
            })
        },
        //注册
        reg(){
            this.checkusername()
            this.checkmobile()
            this.axios.post('reg/',this.form).then(res=>{
                console.log(reg)
                })
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
